<template>
	<div>
		<el-container>
			<el-header style="margin-top: 56px;">
				<h4>我的购物车清单</h4>
			</el-header>
		</el-container>
		<el-container>
			<el-main>
				<el-table :data="newlist">
					<el-table-column label="图片" header-align="100px">
						<template #default="scope">
							<img :src="`${$Imgurl}/showImg/${scope.row.picture}`">
						</template>
					</el-table-column>
					<el-table-column label="商品名称" prop="name"></el-table-column>
					<el-table-column label="商品价格" prop="price"></el-table-column>
					<el-table-column label="商品数量" prop="num">
						<template #default="scope">
							<el-input-number :min="1" controls-position="right" v-model="scope.row.num"></el-input-number>
						</template>
					</el-table-column>
					<el-table-column label="商品总价">
						<template #default="scope">
							{{scope.row.num*scope.row.price}}
						</template>
					</el-table-column>
					<el-table-column label="复选框">
						<template #default="scope">
							<el-checkbox v-model="scope.row.checked"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column label="编号" prop="bookid"></el-table-column>
				</el-table>
				<p style="margin-top: 20px;">总价钱：{{getsum}}</p>
				<p style="margin-top: 20px; border-top: 1px solid black;">
					<el-button style="margin-top: 20px;" @click="getmenus()" type="warning">去下单</el-button>
				</p>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	import instance from '../../../ajax/index.js'
	export default {
		name: 'Cart',
		data() {
			return {
				list: [],
				newlist: [],
				num: 1,
			}
		},
		methods: {
			getmenus() {

				for (let i in this.newlist) {
					if (this.newlist[i].checked == true) {
						this.$store.state.menus.push(this.newlist[i])
						this.$router.push('/home/menu')
					}
				}
				if (this.$store.state.menus.length == 0) {
					this.$message.error({
						message: "请选择书籍",
						offset: 80
					})
				}

			}
		},
		computed: {
			getsum() {
				let sum = 0
				for (let i = 0; i < this.newlist.length; i++) {
					if (this.newlist[i].checked == true) {
						sum += this.newlist[i].price * this.newlist[i].num
					}
				}
				return sum
			}
		},
		mounted() {
			instance.get('/api/fore/cart/findAll').then((res) => {
				let data = res.data.data
				for (let i in data) {
					let obj = {}
					obj.picture = data[i].book.picture
					obj.name = data[i].book.name
					obj.price = data[i].book.price
					obj.bookid = data[i].cart.bookid
					obj.num = data[i].cart.num
					this.newlist.push(obj)
				}
			}).catch((error) => {
				console.log(error);
			})
		}
	}
</script>

<style scoped>
	h4 {
		height: 60px;
		font-weight: bold;
		font-size: 20px;
		line-height: 60px;
	}

	img {
		height: 50px;
	}
</style>
